<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/plus.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./iconfonts/iconfont.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>

<body style="background: white;">
    <!-- 头部区域开始 -->
    <div id="header">
        <div class="header-con">
            <!-- 左侧导航 -->
            <ul class="header-nav">
                <li> <a href="index.html" style="color: #ccc;">小米商城</a> |&nbsp;</li>
                <li>MIUI |&nbsp;</li>
                <li>loT |&nbsp;</li>
                <li>云服务 |&nbsp;</li>
                <li>水滴 |&nbsp;</li>
                <li>金融 |&nbsp;</li>
                <li>有品 |&nbsp;</li>
                <li>Select Region</li>
            </ul>
            <!-- 右侧导航 -->
            <div class="header-right">
                <div class="header-right">
                    <div id="welcomeBox">
                        欢迎您：<span id="usernameSpan"></span>
                        &nbsp;&nbsp;<input id="btnLogout" type="button" value="注销" />
                    </div>
                    <div id="loginBox">
                        <a href="login.html">&nbsp;&nbsp;登录</a>
                    </div>
                    <a href="reginset.html">&nbsp;&nbsp;注册 &nbsp;&nbsp;</a>
                    <a href="#">消息通知&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <!-- 购物车显示区域 -->
                    <p class="Cart">
                        <i class="iconfont icon-gouwuchekong
                    "></i> 购物车
                    </p>
                    <!-- 显示购物车 -->
                    <div class="p-cart">
                        购物车中还没有商品赶紧买吧
                    </div>
                </div>
            </div>
        </div>
        <!-- 头部区域结束 -->
        <!-- logo部分开始 -->
        <div id="logo">
            <div class="logo-con">
                <!-- 左侧logo -->
                <h1><img src="./images/phonepic/logo-mi2.png" alt=""></h1>
                <!-- logo导航 -->
                <ul class="logo-nav">
                    <li>
                        全部商品分类
                    </li>
                    <li>小米手机
                        <ul class="logo-lastnav">
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                            <li><img src="./images/mix2320-220.png" alt=""></li>
                        </ul>
                    </li>
                    <li>红米
                        <ul class="logo-lastnav" style="left: -309px;">
                            <li><img src="./images/note2320x220.png" alt=""></li>
                            <li><img src="./images/note2320x220.png" alt=""></li>
                            <li><img src="./images/note2320x220.png" alt=""></li>
                            <li><img src="./images/note2320x220.png" alt=""></li>
                            <li><img src="./images/note2320x220.png" alt=""></li>
                        </ul>
                    </li>
                    <li>电视
                        <ul class="logo-lastnav" style="left: -367px;">
                            <li><img src="./images/tv2.png" alt=""></li>
                            <li><img src="./images/tv2.png" alt=""></li>
                            <li><img src="./images/tv2.png" alt=""></li>
                            <li><img src="./images/tv2.png" alt=""></li>
                            <li><img src="./images/tv2.png" alt=""></li>
                        </ul>
                    </li>
                    <li>笔记本
                        <ul class="logo-lastnav" style="left: -422px;">
                            <li><img src="./images/computer3.jpg" alt=""></li>
                            <li><img src="./images/computer3.jpg" alt=""></li>
                            <li><img src="./images/computer3.jpg" alt=""></li>
                            <li><img src="./images/computer3.jpg" alt=""></li>
                            <li><img src="./images/computer3.jpg" alt=""></li>
                        </ul>
                    </li>
                    <li>盒子
                        <ul class="logo-lastnav" style="left: -492px;">
                            <li><img src="./images/hezi2.png" alt=""></li>
                            <li><img src="./images/hezi2.png" alt=""></li>
                            <li><img src="./images/hezi2.png" alt=""></li>
                            <li><img src="./images/hezi2.png" alt=""></li>
                            <li><img src="./images/hezi2.png" alt=""></li>
                        </ul>
                    </li>
                    <li>新品
                        <ul class="logo-lastnav" style="left: -553px;">
                            <li><img src="./images/xinping2.png" alt=""></li>
                            <li><img src="./images/xinping2.png" alt=""></li>
                            <li><img src="./images/xinping2.png" alt=""></li>
                            <li><img src="./images/xinping2.png" alt=""></li>
                            <li><img src="./images/xinping2.png" alt=""></li>
                        </ul>
                    </li>
                    <li>路由器
                        <ul class="logo-lastnav" style="left: -603px;">
                            <li><img src="./images/router3.jpg" alt=""></li>
                            <li><img src="./images/router3.jpg" alt=""></li>
                            <li><img src="./images/router3.jpg" alt=""></li>
                            <li><img src="./images/router3.jpg" alt=""></li>
                            <li><img src="./images/router3.jpg" alt=""></li>
                        </ul>
                    </li>
                    <li>智能硬件服务</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
                <!-- 右侧搜索框 -->
                <div class="search">
                    <input type="text">
                    <button><i class="iconfont icon-fangdajing
                    "></i></button>
                </div>
            </div>
        </div>
        <!-- items -->
        <div id="news">
            <div class="news-con">
                <a href="./index.html">首页 &nbsp;/&nbsp; </a>
                <p>全部商品分类</p>
            </div>
        </div>
        <!-- copy -->
        <div id="mobile">
            <div class="mobile-con">
                <!-- 顶部 -->
                <div class="mobile-top">
                    <button class="one"><i class="iconfont icon-59"></i></button> <span>手机</span>
                </div>
                <ul class="copy phone">

                </ul>
                <div class="mobile-top">
                    <button class="one"><i class="iconfont icon-59"></i></button> <span>电视</span>
                </div>
                <ul class="copy tv">

                </ul>
                <div class="mobile-top">
                    <button class="one"><i class="iconfont icon-59"></i></button> <span>笔记本平板</span>
                </div>
                <ul class="copy">
                    <li>
                        <a href="#"><img src="./images/detail/n1.png" alt=""></a>
                        <span>小米笔记本Pro ×14
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n2.png" alt=""></a>
                        <span>Redmi G 2021 Intel版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n3.png" alt=""></a>
                        <span>Redmi G 2021 AMD版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n4.png" alt=""></a>
                        <span>小米平板5
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n5.png" alt=""></a>
                        <span>小米平板5 Pro
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n6.png" alt=""></a>
                        <span>小米笔记本Pro 14增强版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n7.png" alt=""></a>
                        <span>小米笔记本Pro 15增强版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n8.png" alt=""></a>
                        <span>RedmiBook Pro 14增强版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n9.png" alt=""></a>
                        <span>RedmiBook Pro 15增强版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n10.jpg" alt=""></a>
                        <span>小米笔记本Pro × 15
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n11.png" alt=""></a>
                        <span>RedmiBook Pro 14锐龙版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n12.png" alt=""></a>
                        <span>RedmiBook Pro 15锐龙版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n6.png" alt=""></a>
                        <span>小米笔记本Pro 15锐龙版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n5.png" alt=""></a>
                        <span>小米笔记本Pro 15
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n3.png" alt=""></a>
                        <span>小米笔记本Pro 14
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n7.png" alt=""></a>
                        <span>Redmi G游戏本
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n8.png" alt=""></a>
                        <span>RedmiBook Air 13
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n9.png" alt=""></a>
                        <span>小米/Redmi显示器
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n11.png" alt=""></a>
                        <span>黑鲨4 Pro
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/n9.png" alt=""></a>
                        <span>Redmi K30S至尊纪念版
                        </span>
                    </li>
                </ul>
                <div class="mobile-top">
                    <button class="one"><i class="iconfont icon-59"></i></button> <span>家电</span>
                </div>
                <ul class="copy">
                    <li>
                        <a href="#"><img src="./images/detail/d1.jpg" alt=""></a>
                        <span>冰箱
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d2.png" alt=""></a>
                        <span>立式空调
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d3.png" alt=""></a>
                        <span>壁挂空调
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d4.png" alt=""></a>
                        <span>滚筒洗衣机
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d5.jpg" alt=""></a>
                        <span>Redmi全自动波轮洗衣机
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d6.jpg" alt=""></a>
                        <span>净水器
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d7.jpg" alt=""></a>
                        <span>微波炉
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d8.jpg" alt=""></a>
                        <span>电烤箱
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d9.jpg" alt=""></a>
                        <span>扫地机器人
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d10.jpg" alt=""></a>
                        <span>吸尘器
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d11.jpg" alt=""></a>
                        <span>空气净化器
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d12.jpg" alt=""></a>
                        <span>电饭煲
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d13.jpg" alt=""></a>
                        <span>电磁炉
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d14.jpg" alt=""></a>
                        <span>电水壶
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d15.jpg" alt=""></a>
                        <span>滤水壶
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d16.png" alt=""></a>
                        <span>落地风扇
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d17.png" alt=""></a>
                        <span>投影仪
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d18.jpg" alt=""></a>
                        <span>灯具
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d19.jpg" alt=""></a>
                        <span>插线板
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/d20.jpg" alt=""></a>
                        <span>新风机
                        </span>
                    </li>
                </ul>
                <div class="mobile-top">
                    <button class="one"><i class="iconfont icon-59"></i></button> <span>出行穿戴</span>
                </div>
                <ul class="copy">
                    <li>
                        <a href="#"><img src="./images/detail/c1.jpg" alt=""></a>
                        <span>Xiaomi Watch Color 2
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c2.png" alt=""></a>
                        <span>小米手环6 NFC版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c3.png" alt=""></a>
                        <span>小米手环6标准版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c4.png" alt=""></a>
                        <span>Redmi手表
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c5.png" alt=""></a>
                        <span>小米手环5NFC
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c6.png" alt=""></a>
                        <span>小米手环5
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c7.png" alt=""></a>
                        <span>小米手表Color运动版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c8.jpg" alt=""></a>
                        <span>平衡车
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c9.png" alt=""></a>
                        <span>自行车
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c10.jpg" alt=""></a>
                        <span>滑板车
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c11.jpg" alt=""></a>
                        <span>车载充电器
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c12.jpg" alt=""></a>
                        <span>智能记录仪
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c13.png" alt=""></a>
                        <span>充气宝
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c14
                        .png" alt=""></a>
                        <span>石英表
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c15.jpg" alt=""></a>
                        <span>车载充电器
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c16.png" alt=""></a>
                        <span>小米11青春
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c17.png" alt=""></a>
                        <span>小米手表Color运动版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c18.png" alt=""></a>
                        <span>小米手表Color运动版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c19.jpg" alt=""></a>
                        <span>小米手表Color运动版
                        </span>
                    </li>
                    <li>
                        <a href="#"><img src="./images/detail/c20.png" alt=""></a>
                        <span>小米手表Color运动版
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 结束 -->
        <div id="footer">
            <div class="footer-con">
                <!-- footer头部 -->
                <ul class="footer-top">
                    <li><i class="iconfont icon-weixiu"></i> 预约维修服务</li>
                    <li><i class="iconfont icon-qitianwuliyoutuihuan"></i> 7天无理由退货</li>
                    <li><i class="iconfont icon-15"></i> 15天免费退货</li>
                    <li><i class="iconfont icon-liwu"></i> 源69包邮</li>
                    <li><i class="iconfont icon-dizhiguanli"></i> 502家售后网店</li>
                </ul>
                <!-- 内容导航 -->
                <dl class="footer-nav">
                    <dt>帮助中心</dt>
                    <dd>账户管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>服务支持</dt>
                    <dd>售后服务</dd>
                    <dd>自助服务</dd>
                    <dd>相关下载</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>关于小米</dt>
                    <dd>了解小米</dd>
                    <dd>加入小米</dd>
                    <dd>投资者关系</dd>
                    <dd>企业社会责任关系</dd>
                    <dd>廉洁举报</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                    <dd>公益基金会</dd>
                </dl>
                <dl class="footer-nav">
                    <dt>特色服务</dt>
                    <dd>F码通道</dd>
                    <dd>礼物码</dd>
                    <dd>防伪查询</dd>
                </dl>
                <div class="footer-right">
                    <img src="./images/kf_03.png" alt="">
                </div>
            </div>
        </div>
        <!-- 公示-->
        <div id="item">
            <div class="item-con">
                <h1><img src="./images/logo.jpg" alt=""></h1>
                <a href="#">小米商城 |</a>
                <a href="#">MIUI |</a>
                <a href="#">米家 |</a>
                <a href="#">米聊 |</a>
                <a href="#">多看 |</a>
                <a href="#">游戏 |</a>
                <a href="#">政企服务 |</a>
                <a href="#">小米天猫店 |</a>
                <a href="#">小米集团隐私政策 |</a>
                <a href="#">小米公司儿童信息保护规则 |</a>
                <a href="#">小米商城隐私政策 |</a>
                <a href="#">小米商城用户协议 |</a>
                <a href="#">问题反馈 |</a> <br>
                <a href="#">北京互联网发原法律服务工作站 |</a>
                <a href="#">中国消费者协会</a>
                <a href="#">北京市消费者协会</a>
                <p>mi.com京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2020]0276-042号
                    (京)网械平台备字(2018）第00005号互联网药品信息服务资格证(京)-非经营性-2014-0090营业执照医疗器械质量公告增值电信业务许可证网络食品经营备案京食药网食备202010048食品经营许可证
                    违法和不良信息举报电话:171-5104-4404-知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
                <div class="item-footer">
                    <img src="./images/end_03.png" alt="">
                </div>
                <!-- 侧边导航 -->
                <div class="r-nav">
                    <ul class="nav-end">
                        <li>
                            <a href="#"><img src="./images/phonepic/o1.png" alt=""></a>
                            <p>手机APP</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/phonepic/o2.png" alt=""></a>
                            <p>个人中心</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/phonepic/o3.png" alt=""></a>
                            <p>售后服务</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/phonepic/o5.png" alt=""></a>
                            <p>人工客服</p>
                        </li>
                        <li>
                            <a href="#"><img src="./images/phonepic/o5.png" alt=""></a>
                            <p>购物车</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

</body>

</html>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/cookieTools.js"></script>
<script>
    // 头部右侧导航显示购物车
    let oCart = document.querySelector('.Cart');
    let oPcart = document.querySelector('.p-cart');
    oCart.onmouseover = function () {
        oCart.style.backgroundColor = 'white';
        oPcart.style.display = 'block';
    }
    oCart.onmouseout = function () {
        oCart.style.backgroundColor = '';
        oPcart.style.display = 'none';
    }
    // 收缩列表
    let obtn = document.querySelectorAll('.one');
    let oul = document.querySelectorAll('.copy');

    for (let i = 0; i < obtn.length; i++) {
        obtn[i].addEventListener('click', function () {
            let index = i;
            for (let j = 0; j < oul.length; j++) {
                if (j == index) {
                    oul[index].style.display = 'none';

                }
            }


        })
    }
    for (let i = 0; i < obtn.length; i++) {
        obtn[i].ondblclick = function () {
            let index = i;
            for (let j = 0; j < oul.length; j++) {
                if (j == index) {
                    oul[index].style.display = 'block';
                }
            }
        }
    }
    // console.log(obtn, oul);
    // cookie

    function initUI() {
        let username = getCookie("username");
        if (username) {
            $("#usernameSpan").html(username);
            $("#welcomeBox").css({
                "display": "block"
            });
            $("#loginBox").css({
                "display": "none"
            });
        } else {
            $("#loginBox").css({
                "display": "block"
            });
            $("#welcomeBox").css({
                "display": "none"
            });
        }
    }

    $(function () {
        initUI();
        $("#btnLogout").click(function () {
            removeCookie("username");
            initUI();
        });
    });

    // 手机接受数据

    $.ajax({
        url: "getGoodsList.php",
        method: "GET",
        data: {
            typeId: '001'
        },
        success: function (result) {
            getPhoneData(JSON.parse(result))
        }
    });

    function getPhoneData(res) {
        // console.log();
        for (let i = 0; i < res.length; i++) {
            let lis = $('<li></li>')
            let oul = $('.phone')
            lis.html(`
    
      <a href="./MF.html?goodsId=${res[i].goodsId}" class="draw"> <img src="${res[i].goodsImg}" alt=""></a>
                        <span>${res[i].goodsName}
                        </span>
               	
    `).appendTo(oul)
        }
    }
    // 电视接受数据
    $.ajax({
        url: "getGoodsList.php",
        method: "GET",
        data: {
            typeId: '002'
        },
        success: function (result) {
            getTvData(JSON.parse(result))
        }
    });

    function getTvData(res) {
        console.log(res);
        for (let i = 0; i < res.length; i++) {
            console.log(res[i].goodsImg);
            let lis = $('<li></li>')
            let oul = $('.tv')
            lis.html(`
    
            <a href="./item.html?goodsId=${res[i].goodsId}"  class="draw"> <img src="${res[i].goodsImg}" alt=""></a>
                        <span>${res[i].goodsName}
                        </span>
               	
    `).appendTo(oul)
        }
    }
</script>